<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>购买商品</title>
</head>
<%
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<script type="text/javascript"
	src="<%=basePath%>/statics/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	function shop() {
		var id = $("#tid").text();
		var remaining = $("#remaining").text();
		var num = $("#buyCount").val();
		if (num == null || num == '' || null == 0) {
			alert("购买数量不能为空");
		} else if (num % 1 != 0) {
			alert("购买数量必须为整数");
		} else {
			window.location.href = "${pageContext.request.contextPath }/shopping?id="
					+ id + "&num=" + num + "&remaining=" + remaining;
		}
	}

	function sum() {
		var num = $("#buyCount").val();
		var price = $("#price").text();
		var sum = num * price;
		if (num % 1 != 0) {
			alert("购买数量必须为整数");
			$("#sum").text();
		} else {
			$("#sum").text(sum);
		}
	}
</script>

<body>
	<table align="center" border="1" style="margin:150px auto;">
		<tr align="center" style="font-size:60px;">
			<td colspan="2">购买商品</td>
		</tr>
		<tr>
			<td>商品编号</td>
			<td id="tid">${detail.id }</td>
		</tr>
		<tr>
			<td>商品名称</td>
			<td>${detail.name }</td>
		</tr>
		<tr>
			<td>商品分类</td>
			<td>${detail.sortName }</td>
		</tr>
		<tr>
			<td>单价(元)</td>
			<td id="price">${detail.price}</td>
		</tr>
		<tr>
			<td>剩余数量</td>
			<td id="remaining">${detail.remaining}</td>
		</tr>
		<tr>
			<td>购买数量</td>
			<td><input type="text" id="buyCount" onchange="sum();" />
			</td>
		</tr>
		<tr>
			<td>总金额(元)</td>
			<td id="sum">${totalPrice}</td>
		</tr>
		<tr align="center">
			<td colspan="2"><input type="button" onclick="shop();"
				value="购买" id="buy" /> <input type="button"
				onclick="window.history.back()" value="返回" id="up" />
			</td>
		</tr>
	</table>
</body>

</html>